﻿@using TrainingManagerSystem.WebUI.Models

@model IEnumerable<TrainingManagerSystem.WebUI.TrainingManagerSystemService.AccountCourse>
<div id='body'>
    <link href="@Url.Content("~/Content/Css/jquery.treeview.css")" rel='stylesheet' />
    <link href="@Url.Content("~/Content/Css/jquery.dataTables.css")" rel='stylesheet' />
    <link href="@Url.Content("~/Content/Css/css.accountCourse.css")" rel='stylesheet' />

    <div id='content-left' class='float-left'>
        <div class='title-nav'>
            Department
        </div>
        <div id='treeWrapper'>
            @Html.RenderTree((IEnumerable<CompositeThing>)ViewBag.Data, t => t.Name)
        </div>
    </div>

    <div id='content-right' class='float-left'>
        <div class='title-view bold'>View Account Course</div>
        @Html.RenderSearchOption()
        <div class='clear-fix'><span id='setting'>Table configuration</span></div>
        <div id='list-search'>
            <table class='sortable' id='dataTables'>
                @Html.RenderColumns()
                <tbody>
                    @foreach (var m in Model)
                    {
                        <tr>
                            <td>@m.EmployeeId</td>
                            <td><a class='acc' href='javascript:;'>@m.AccountName</a></td>
                            <td>@m.FullName</td>
                            <td>@m.JobTitleName</td>
                            <td>@m.Department</td>
                            <td>@m.CourseName</td>
                            <td>@m.Costs</td>
                            <td>@m.CurrencyName</td>
                            <td>@m.LocationName</td>
                            <td class="dDate">@m.CourseStartDate</td>
                            <td class="dDate">@m.EndDate</td>
                            <td>@m.PassCoverage</td>
                            <td>@m.TimeCommit</td>
                            <td>@m.CourseYear</td>
                            <td>@m.TrainedDuration</td>
                            <td>@m.FinalResult</td>
                            <td><span>@m.Note</span></td>
                            <td style='display: none;'>@m.TotalRows</td>
                        </tr>
                    }
                </tbody>
            </table>
            <div class='clear-fix'></div>
        </div>
        <div id='details'>
            @Html.RenderDetailAccountCourse()
        </div>
        <div id='pop'>
            @Html.RenderTableConfigurationPopup()
        </div>
        <div class='clear-fix'></div>
    </div>
    <div class='clear-fix'></div>
    <div id='notes'></div>
</div>

@section Scripts {
    <script src="@Url.Content("~/Content/Scripts/jquery.AccountCourse.js")"></script>
    <script src="@Url.Content("~/Content/Scripts/convertDatetimeJson.js")"></script>
    <script type='text/javascript'>
        $(document).ready(function () {
            getLocationId();
            PrepareTree();
            CreateTreeMenuById('tree');
            Initial();
            window.hidden = getColumnsHide('fields');
            window.objTable = CreateDataTableById('dataTables', window.hidden);
            formatDate();
            ShowPopupByAccoutName('dataTables', 'details', 'notes');
            ClosePopup('btnCloseI', 'details');
            ChangeTableConfiguration('changeFields', 'dataTables', 'fields', 'wrapper', 'pop', 0, $('#dataTables_length option:selected').text(), objTable.fnGetData(0)[17]);
            $('.wrapper').addClass('configurationPaging');
            configurationPaging('dataTables', 0, $('#dataTables_length option:selected').text(), objTable.fnGetData(0)[17]);
            $('#dataTables_length').change(function () {
                getDataFromDatabase('dataTables', 1, $('#dataTables_length option:selected').text());
            });
        })
    </script>
}